import { BaiduMap } from '../../../shared/component/ng2-baidumap/components/map';
import { Component, OnInit, Input,ViewChild } from '@angular/core';
import { OfflineOptions, ControlAnchor, NavigationControlType } from 'angular2-baidu-map';

@Component({
  selector: 'app-userinfo-brand-rank-map',
  template: `
        <baidu-map #baiduMapUserInfo ak="ZEGePd6q8rGiwo4vI4qyGWv1vXMMNNFK" [options]="opts"
           [offline]="offlineOpts" (onMapLoaded)="loadMap($event)" 
          (onMarkerClicked)="clickMarker($event)" (onClicked)="clickmap($event)" ></baidu-map>
    `,
  styles: [`
        baidu-map{
            width: 100%;
            height: 260px;
            display: block;
        }
    `]
})
export class UserInfoBrandRankMap implements OnInit {

  opts: any;
  offlineOpts: OfflineOptions;
  @Input() public longtitude: number;
  @Input() public latitude: number;
  @ViewChild('baiduMapUserInfo') baiduMapUserInfo: BaiduMap;
  ngOnInit() {
    this.opts = {
      center: {
        longitude: this.longtitude,
        latitude: this.latitude
      },
      zoom: 17,
      markers: [{
        longitude: this.longtitude,
        latitude: this.latitude,
        title: 'Where',
        content: 'Put description here',
        enableDragging: true
      }],
      geolocationCtrl: {
        anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT
      },
      scaleCtrl: {
        anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_LEFT
      },
      overviewCtrl: {
        isOpen: false
      },
      navCtrl: {
        type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LARGE
      }
    };

    this.offlineOpts = {
      retryInterval: 5000,
      txt: 'NO-NETWORK'
    };
  }

  loadMap(map: any) { }

  clickMarker(marker: any) { }

  clickmap(e: any) { }
}
